<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>好享家</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<link href="${ctx}/static/css/font-awesome.min.css" rel="stylesheet">
<link href="${ctx}/static/css/common.css?v=1.0" rel="stylesheet">
<link href="${ctx}/static/jquery-validation/1.11.1/validate.css" type="text/css" rel="stylesheet" />
</head>
<body style="padding-bottom:6rem">
<header class="header">
    <span class="colfff font16 span">绑定会员卡</span>

</header>

<form id="inputForm" name="inputForm" action="${ctx}/my/bindingWeixin" method="post" class="form-horizontal">
	<section class="loginWap ">
	<ul class="top40">
	  <li>
	  	<input type="tel" id="mobilePhone" name="mobilePhone" placeholder="请输入您的手机号码" value="${mobilePhone}"/>
	    <i class="fa fa-mobile"></i>
	  </li>
	  <p id="errorMsg" style="margin-bottom:1.5rem;"></p>
	  <li><input type="tel" class="yzm required" id="valiCode" name="valiCode" placeholder="请输入验证码" value="" /><span class="countDown btns btns-ye btns-nom" >发送手机验证码</span></li>
	</ul>
	</section>
	<input type="hidden" id="openId" name="openId" value="${openId}">
	
</form>

<input type="hidden" id="sendValiCodeServerUrl" name="sendValiCodeServerUrl" value="${ctx}/valiCode/sendValiCode">


<c:if test="${not empty errorMsg}">
<div class="errorWap colRed left25"><i class="fa fa-warning"></i><span class="left10">${errorMsg}</span></div>
</c:if>

<section class="pad10">
  <a href="javascript:addCard();" class="btns btns-biggest btns-ye">绑定会员卡</a>
</section>




<%@ include file="/WEB-INF/layouts/footer.jsp"%>


<script type="text/javascript" src="${ctx}/static/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/static/js/idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/pub.js"></script>
<script src="${ctx}/static/jquery-validation/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
<script src="${ctx}/static/jquery-validation/1.11.1/messages_bs_zh.js" type="text/javascript"></script>
<!-- 对接微信 JS Api -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	console.log(location.href.split('#')[0]);
	var thisPageUrl = location.href.split('#')[0];
	
	$.ajax({ url: "${ctx}/jsapi/ajax/sign", 
		 type: "POST",
		 data:{url:""+thisPageUrl},
		 dataType: "json",
		 //sync: true,
		 cache: false,//解决三星手机，缓存后不提交请求
		 success: function(data){
			console.log(data);
			if(data.success){
				configWeiXin(data.appId,data.timestamp,data.nonceStr,data.signature);
				regiestWxJsApi();
			}else{
				console.log("配置weixin jsapi失败");
			}
			
		 },
	  	 error: function(XMLHttpRequest, textStatus, errorThrown){
	      	console.log(XMLHttpRequest.responseText);
		 }
	});
});



  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
   * 邮箱地址：weixin-open@qq.com
   * 邮件主题：【微信JS-SDK反馈】具体问题
   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
   */
function configWeiXin(appId, timestamp, nonceStr, signature){
	   wx.config({
	      debug: true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	      appId: appId,
	      timestamp: timestamp,
	      nonceStr: nonceStr,
	      signature: signature,
	      jsApiList: [
	        'checkJsApi',
	        'onMenuShareTimeline',
	        'onMenuShareAppMessage',
	        'onMenuShareQQ',
	        'onMenuShareWeibo',
	        'hideMenuItems',
	        'showMenuItems',
	        'hideAllNonBaseMenuItem',
	        'showAllNonBaseMenuItem',
	        'translateVoice',
	        'startRecord',
	        'stopRecord',
	        'onRecordEnd',
	        'playVoice',
	        'pauseVoice',
	        'stopVoice',
	        'uploadVoice',
	        'downloadVoice',
	        'chooseImage',
	        'previewImage',
	        'uploadImage',
	        'downloadImage',
	        'getNetworkType',
	        'openLocation',
	        'getLocation',
	        'hideOptionMenu',
	        'showOptionMenu',
	        'closeWindow',
	        'scanQRCode',
	        'chooseWXPay',
	        'openProductSpecificView',
	        'addCard',
	        'chooseCard',
	        'openCard'
	      ]
	  });
   }
   
$(document).ready(function() {
	
	//为inputForm注册validate函数
	$("#inputForm").validate({
		rules: {
			mobilePhone:{required:true},
			valiCode: {
				required:true
			}
		},
		messages: {
			mobilePhone:{
				required:"请输入手机号码!"
			},
			valiCode: {
				required:"请输入验证码!"
			}
		},
		errorPlacement:function(error,element){
			//element.parent().next("p").append('<i class="fa fa-warning left10" style="color:red;"></i>')
			error.appendTo(element.parent().next("p"));
		}
	});
	
});

function addCard(){
	
	console.log("addCard");
	
	//$("#inputForm").submit();
	
	//document.inputForm.submit();
	
	$.ajax({ url: "${ctx}/card/ajax/cardsign", 
		 type: "POST",
		 dataType: "json",
		 //sync: true,
		 cache: false,//解决三星手机，缓存后不提交请求
		 success: function(data){
			 alert(JSON.stringify(data.cardList));
			 if(data.success){
				wx.addCard({
			      cardList: data.cardList,
			      success: function (res) {
			        alert('已添加卡券：' + JSON.stringify(res.cardList));
			      }
			    });
			}else{
				alert("配置weixin jsapi失败"+data.errmsg);
			}
			
		 },
	  	 error: function(XMLHttpRequest, textStatus, errorThrown){
	  		alert(XMLHttpRequest.responseText);
		 }
	});
}
</script>
</body>
</html>